<template>
    <div :class="['page-cinema-movie',{'stop':isScroll}]">
         <div class="page-header">
            <div @click="$router.go(-1)" class="page-header-left">
                <span class="page-header-back"></span>
            </div>
            <div class="page-header-title line-ellipsis" v-if="movieinfo">{{movieinfo.nm}}</div>
            <div class="page-header-right">
                <div class="nav-btn">
                    <img src="../assets/images/nav-button.png" alt="" class="nav-icon">
                </div>
            </div>
        </div>
        <div class="movie-wrapper">
            <div class="movie-detail" v-if="movieinfo">
                <div class="mask"></div>
                <div class="poster-bg" :style="{'background-image':'url('+movieinfo.img+')'}"></div>
                <div class="detail">
                    <div class="poster">
                        <img :src="movieinfo.img" alt="" class="poster-img">
                    </div>
                    <div class="content">
                        <div class="title line-ellipsis">{{movieinfo.nm}}</div>
                        <div class="public line-ellipsis">{{movieinfo.enm}}</div>
                        <div class="score line-ellipsis">
                            <span>{{movieinfo.sc==0?'暂无评分':movieinfo.sc}}</span>
                            <span class="sum">({{movieinfo.snum | playCountNum}}人评)</span>
                        </div>
                        <div class="type line-ellipsis">
                            <span>{{movieinfo.cat}}</span>
                            <div class="type-img" v-if="movieinfo.ver">
                                <div class="imax icon-bg"></div>
                            </div>
                        </div>
                        <div class="public line-ellipsis">
                            {{movieinfo.src}}/{{movieinfo.dur}}分钟
                        </div>
                        <div class="public line-ellipsis">{{movieinfo.pubDesc}}</div>
                    </div>
                </div>
                <router-link tag="div" :to="'/detail?id='+ movieinfo.id" class="movie-detail-arrow">
                    <span class="arrow-bg"></span>
                </router-link>
            </div>
            <div class="select-sticky">
                <div class="show-warp">
                    <div class="show-days" v-if="datelist">
                        <div :class="['day' ,{'chosen':navIndex==index}]" v-for="(item,index) in datelist" :key="index" @click="selectNav(index,item.date)">
                            <span>{{item.date | navTime}}</span>
                        </div>
                    </div>
                </div>
                <div class="nav-wrap">
                    <div class="filter-nav">
                        <div class="tab" ref="tab">
                            <div :class="['item','line-ellipsis', {'chosen':type==1}]" @click="select(1)">
                                <i>全城</i>
                                <span class="drop"></span>
                            </div>
                            <div :class="['item','line-ellipsis', {'chosen':type==2}]" @click="select(2)">
                                <i>品牌</i>
                                <span class="drop"></span>
                            </div>
                            <div :class="['item','line-ellipsis', {'chosen':type==3}]" @click="select(3)">
                                <i>筛选</i><i ref="little"></i>
                                <span class="drop"></span>
                            </div>
                        </div>
                        <div class="close-tab">
                                    <div class="tab-content">
                                        <div class="page region" v-if="type==1">
                                            <div class="region-tab">
                                                <ul class="tablist">
                                                    <li :class="['item', {'chosen':showTab==index}]" @click="showTab=index" v-for="(item,index) in alltype" :key="index" >{{item}}</li>
                                                </ul>
                                            </div>
                                            <div class="region-list">
                                                <div class="region-sidenav">
                                                    <div class="district" v-if="showTab==0">
                                                        <div :class="['district-li','item', {'chosen':showTab1==index}]" @click="selectRegion(item.id)" v-for="(item,index) in districtLeft" :key="index">{{item.name}}({{item.count}})</div>
                                                    </div>
                                                    <div class="subway" v-if="showTab==1">
                                                        <div :class="['district-li','item', {'chosen':showTab6==index}]" @click="selectline(item.id)" v-for="(item,index) in subway" :key="index">{{item.name}}</div>
                                                    </div>
                                                </div>
                                                <div class="region-list-item">
                                                    <div class="filter-list"  v-if="showTab==0">
                                                        <div :class="['item' ,{'chosen':showTab2==index}]" @click="checkItem(item.id,index,item.name)" v-for="(item,index) in districtRight" :key="index">
                                                            <span class="item-name">{{item.name}}</span>
                                                            <span class="item-count">{{item.count}}</span>
                                                        </div>
                                                    </div>
                                                    <div class="filter-list" v-if="showTab==1">
                                                        <div :class="['item' ,{'chosen':showTab2==index}]" @click="checklineItem(item.id,index,item.name)" v-for="(item,index) in subwayItem" :key="index">
                                                            <span class="item-name">{{item.name}}</span>
                                                            <span class="item-count">{{item.count}}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="page brand" v-if="type==2">
                                            <div class="brand-content">
                                                <div :class="['item', 'brand-list', {'chosen':showTab3==index}]" @click="checkBrand(item.id,index,item.name)" v-for="(item,index) in brand" :key="index">
                                                    <div class="brand-name">{{item.name}}</div>
                                                    <div class="brand-count">{{item.count}}</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="page special" v-if="type==3">
                                            <div id="special-content">
                                                <div class="item-title">影院服务</div>
                                                <div class="item-list">
                                                    <div :class="['item', {'chosen':showTab4==index}]" @click="checkService(item.id,index,item.name)" v-for="(item,index) in service" :key="index">{{item.name}}</div>
                                                </div>
                                            </div>
                                            <div id="special-btn">
                                                <span class="btn" id="cancel-btn" @click="reset">重置</span>
                                                <span class="btn" id="confirm-btn" @click="sure">确定</span>
                                            </div>
                                        </div>
                                    </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="cinema-wrap" v-if="!nothing">                       
                    <!-- <van-loading size="24px" v-if="showloading">正在加载...</van-loading> -->
                    <div class="list-wrap" v-if="!showloading">
                                    <van-list
                                        v-model="loading"                                       
                                        :finished="finished"           
                                        @load="onLoad"                                      
                                    >
                                    <div class="item" v-for="(item,index) in cinemalist" :key="index" @click="godetail(item.id)">
                                        <div class="title-wrap">
                                            <div class="title-block">
                                            <div class="title line-ellipsis">
                                                <span>{{item.name}}</span>
                                            </div>
                                            <div class="price-block">
                                                    <span class="price">{{item.sellPrice}}</span>
                                                    <span class="q">元起</span>
                                            </div>
                                            </div>
                                            <div class="location-block">
                                                <div class="line-ellipsis">{{item.addr}}</div>
                                                <div class="distance">{{item.distance}}</div>
                                            </div>
                                            <div class="label-block" v-if="item.labels.length!=0">
                                                <div :style="[{'color': k.color},{'border-color':k.color}]" v-for="(k,i) in item.labels" :key="i">{{k.name}}</div>
                                            </div>
                                            <div class="discount-block" v-if="item.promotion.cardPromotionTag!=''">
                                                <div class="discount">
                                                    <div class="discount-label cardPromotionTag"></div>
                                                    <div class="discount-label-text">{{item.promotion.cardPromotionTag}}</div>
                                                </div>
                                            </div>

                                        </div>
                                        <div class="recent">
                                            <span class="time-line">{{item.showTimes}}</span>
                                            <!-- <span class="time-line after"> 19:40</span> -->
                                        </div>
                                    </div>
                                     <div class="lodaing" v-if="showloading">
                                        <div class="img">
                                          <img class="img1" src="../assets/images/maoyan01.png" alt="" />
                                          <img class="img2" src="../assets/images/maoyan02.png" alt="" />
                                        </div>
                                    </div>
                            </van-list>
                    </div>    
            </div>
             <div class="nothing"  v-if="nothing"><img src="../assets/images/nothing.png" alt=""></div> 
        </div>
    </div>
</template>

<script>
import {getShowdays,getMovieIntro,getSelectDetail,getSelectCinemas} from '../api/movie.js'
    export default {
        data() {
            return {
                isScroll:false,
                navIndex:0,
                type: 0,
                showTab:0,
                showTab1:0,
                showTab2:0,
                showTab3:0,
                showTab4:0,
                showTab5:0,
                showTab6:0,
                alltype:['商区','地铁站'],
                datelist:null,//放映时间
                movieinfo:null,//电影售卖信息
                currentDate:null,//当前时间
                limitnum:10,//限制列表加载长度
                offset:10,//分页偏移
                cityId:null,//城市id
                cinemalist:null,//影院筛选结果

                loading: false,//加载动画
                finished: false,
                showloading:true,
                nothing:false,

                //行政区
                districtLeft:null,//行政区数据
                districtRight:null,//行政区下级数据
                districtId:-1,//行政区id
                areaId:-1,//商圈

                subway:null,//地铁
                subwayItem:null,
                lineId:-1,
                stationId:-1,


                brand:null,//品牌
                brandIds:-1,//品牌id

                service:null,//服务
                serviceId:-1,
            };
        },
        methods: {
            select(value){
                this.isScroll=!this.isScroll
                this.type=this.type==value?null:value
            },
            //获取影片上映日期
            getShowDateFun(movieId,cityId){
                getShowdays({movieId,cityId}).then(data=>{
                    if (data) {
                        this.datelist=data.data.dates
                    }
                })
            },
            //获取影片信息
            getMovieInfoFun(movieId){
                getMovieIntro({movieId}).then(data=>{
                    this.movieinfo=data.data.movie
                })
            },
            //获取影院筛选条件
            getCinemaTypeFun(movieid,cityId,showDate){
                getSelectDetail({movieid,cityId,showDate}).then(data=>{
                    // console.log(data);
                    this.districtLeft=data.data.district.subItems//行政区列表
                    this.subway=data.data.subway.subItems//地铁列表
                    this.brand=data.data.brand.subItems//品牌列表
                    this.service=data.data.service.subItems//服务列表
                })
            },
            //获取影院筛选结果  limit offset showDate movieId cityId districtId lineId areaId stationId brandIds serviceIds
            getCinemasListFun(){
                this.cinemalist=null,
                this.offset=0
                // this.loading=true
                getSelectCinemas({
                    showDate:this.currentDate,
                    cityId:this.cityId,
                    movieId:this.$route.query.movieId,
                    offset:this.offset,
                    limit:this.limitnum,
                    districtId:this.districtId,
                    areaId:this.areaId,
                    brandId:this.brandIds,
                    serviceId:this.serviceId,
                    lineId:this.lineId,
                    stationId:this.stationId,

                }).then(data=>{
                    if (data.data.cinemas.length==0 || data.data.cinemas.length<10) {
                        this.finished=true
                    }
                    if (data.data.cinemas.length>=10) {
                        this.finished=false
                    }
                    if (data.data.cinemas.length==0) {
                        this.nothing=true
                    }else{
                        this.nothing=false
                    }
                    this.cinemalist=data.data.cinemas
                    // console.log(this.cinemalist);
                    this.offset=10
                    setTimeout(()=>{
                        // this.loading=false
                        this.showloading=false
                    },800)
                    // console.log(this.nothing);
                })
            },
            //加载数据
            getCinemaList(){
                this.loading=true
                this.isScroll=true
                getSelectCinemas({
                    showDate:this.currentDate,
                    cityId:this.cityId,
                    movieId:this.$route.query.movieId,
                    offset:this.offset,
                    limit:this.limitnum,
                    districtId:this.districtId,
                    areaId:this.areaId,
                    brandId:this.brandIds,
                    serviceId:this.serviceId,
                    lineId:this.lineId,
                    stationId:this.stationId,
                }).then(data=>{
                    // console.log(data);
                    this.cinemalist=[...this.cinemalist,...data.data.cinemas]
                    if (this.cinemalist.length<10) {
                        this.loading=false
                        this.isScroll=false
                        this.finished=true
                    }
                    // console.log("增加到了",this.cinemalist.length);
                    setTimeout(()=>{
                        this.loading=false
                        this.isScroll=false
                    },500)
                })
                this.offset +=10
                if (this.offset >= 60) {
                    this.finished = true;
                }

            },
            onLoad(){
                this.getCinemaList()
            },
            //选择日期
            selectNav(index,value){
                this.navIndex=index
                this.currentDate=value
                this.showloading=true
                // console.log(this.currentDate);
                this.getCinemasListFun()

            },
            //获取当前时间
            getCurrentDate(){
                let time = new Date()
                let y = time.getFullYear()
                let m = time.getMonth()+1<10?'0'+time.getMonth()+1:time.getMonth()+1
                let d = time.getDate()<10?'0'+time.getDate():time.getDate()

                this.currentDate = `${y}-${m}-${d}`
            },
            //商区
            selectRegion(id){
                let index = this.districtLeft.findIndex(item=>item.id==id)
                this.showTab1=index
                this.showTab2=0
                this.districtRight=this.districtLeft[index].subItems

                //获取行政区id
                this.districtId=id
                if (id==-1) {
                    this.areaId=id
                    this.showTab2=0
                    this.type=null
                    
                    this.getCinemasListFun() 
                    this.$refs.tab.getElementsByTagName("i")[0].innerText='全城'
                }
            },
            //商区下级列表
            checkItem(id,i,name){
                this.isScroll=false
                this.showTab2=i
                //获取区域id
                this.areaId=id
                this.lineId=-1
                this.stationId=-1
                if (id==-1) {
                    
                    this.getCinemasListFun()  
                    this.$refs.tab.getElementsByTagName("i")[0].innerText=this.districtLeft[this.showTab1].name
                }else{
                    this.$refs.tab.getElementsByTagName("i")[0].innerText=name
                }
                this.getCinemasListFun()
                this.type=null
            },
            //地铁
            selectline(id){
                let index = this.subway.findIndex(item=>item.id==id)
                this.showTab6=index
                this.showTab2=0
                this.lineId=id
                this.subwayItem = this.subway[index].subItems
                if (id==-1) {
                    this.areaId=id
                    this.showTab2=0
                    this.type=null
                    
                    this.getCinemasListFun() 
                    this.$refs.tab.getElementsByTagName("i")[0].innerText='全城'
                }
            },
            checklineItem(id,i,name){
                this.isScroll=false
                this.showTab2=i
                //获取区域id
                this.areaId=-1
                this.districtId=-1          
                this.stationId=id
                if (id==-1) {
                    
                    this.getCinemasFun()  
                    this.$refs.tab.getElementsByTagName("i")[0].innerText=this.districtLeft[this.showTab1].name
                }else{
                    this.$refs.tab.getElementsByTagName("i")[0].innerText=name
                }
                this.type=null
            },
            //品牌
            checkBrand(id,index,name){
                this.isScroll=false
                this.showTab3=index
                this.brandIds=id
                this.$refs.tab.getElementsByTagName("i")[1].innerText=name
                this.type=null
                
                this.getCinemasListFun()
            },
            //服务
            checkService(id,index,name){
                this.isScroll=false
                this.showTab4=index
                this.serviceId=id
                if (id==-1) {
                    this.$refs.tab.getElementsByTagName("i")[2].innerText='筛选'
                }else{
                    this.$refs.tab.getElementsByTagName("i")[2].innerText=`${name}`
                }
                
                this.getCinemasListFun()
                
            },
            //重置
            reset(){
                this.isScroll=false
                this.serviceId=-1;
                this.type=null
                
                this.getCinemasListFun()
            },
            //确定
            sure(){
                this.type=null
                this.isScroll=false
            },
            //跳转影片购买页面
            godetail(id){
                // console.log(id);
                this.$router.push({path:'/cinema',query:{id,movieId:this.$route.query.movieId}})
            }

        },
        created() {
            this.cityId=this.$route.query.cityId
            this.getShowDateFun(this.$route.query.movieId,this.$route.query.cityId)
            this.getMovieInfoFun(this.$route.query.movieId)
            this.getCurrentDate()
            this.getCinemaTypeFun(this.$route.query.movieId,this.$route.query.cityId,this.currentDate)
            this.getCinemasListFun()
        },
        filters:{
            //导航时间
            navTime(value){
              let dates = value;
              let datesar = dates.split("-");
              let date = new Date();
              let datewl = new Date(datesar[0], String(datesar[1] - 1), datesar[2]);
              let datewls = datewl.getDay();

              let datesl = date.getDate();
              if (datesar[2] == datesl) {
                return "今天" + datesar[1] + "月" + datesar[2] + "日";
              } else if (datesar[2] == Number(datesl) + 1) {
                return "明天" + datesar[1] + "月" + datesar[2] + "日";
              } else if (datesar[2] == Number(datesl) + 2) {
                return "后天" + datesar[1] + "月" + datesar[2] + "日";
              } else if (datewls == 1) {
                return "星期一" + datesar[1] + "月" + datesar[2] + "日";
              } else if (datewls == 2) {
                return "星期二" + datesar[1] + "月" + datesar[2] + "日";
              } else if (datewls == 3) {
                return "星期三" + datesar[1] + "月" + datesar[2] + "日";
              } else if (datewls == 4) {
                return "星期四" + datesar[1] + "月" + datesar[2] + "日";
              } else if (datewls == 5) {
                return "星期五" + datesar[1] + "月" + datesar[2] + "日";
              } else if (datewls == 6) {
                return "星期六" + datesar[1] + "月" + datesar[2] + "日";
              } else if (datewls == 0) {
                return "星期日" + datesar[1] + "月" + datesar[2] + "日";
              }
            },
            playCountNum(value){
                if (value<10000) {
                  return value
                }
                  let w = value >10000 ? value/10000:value
                  let y = w > 10000 ? parseInt(w/10000) + "亿":parseInt(w) + "万"

                  return y
            }
        }
    }
</script>

<style lang="less" scoped>
.page-cinema-movie{
    width: 100%;
    height: 100%;
    overflow-y: scroll;

    .page-header{
        display: flex;
        height: 50px;
        text-align: center;
        color: #fff;
        background: #e54848;

        .page-header-left{
            width: 50px;
            height: 100%;
            line-height: 50px;

            .page-header-back{
                display: inline-flex;
                position: relative;
                width: 16px;
                height: 16px;
                vertical-align: middle;

                &::before{
                    content: "";
                    position: absolute;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    box-sizing: border-box;
                    border-bottom: 2px solid #fff;
                    border-left: 2px solid #fff;
                    transform: rotate(45deg);
                }
            }
        }
        .page-header-title{
            flex: 1;
            line-height: 50px;
            font-size: 18px;
            font-weight: 400;
        }
        .page-header-right{
                position: relative;
                display: flex;
                align-items: center;
                width: 50px;
                height: 100%;
                line-height: 50px;

                .nav-btn{
                    flex: 1;
                    text-align: right;
                    margin-right: 6px;

                    .nav-icon{
                        display: inline-block;
                        width: 17px;
                        height: 16px;
                    }
                }
        }
    }
    .movie-wrapper{

        .movie-detail{
            position: relative;
            height: 188px;
            font-size: 12px;
            overflow: hidden;
            cursor: pointer;

            .mask{
                position: absolute;
                z-index: -1;
                width: 100%;
                height: 100%;
                background-color: #333;
            }
            .poster-bg{
                width: 100%;
                height: 100%;
                z-index: -1;
                overflow: hidden;
                position: absolute;
                background-image: url(https://p0.pipi.cn/mmdb/25bfd651ecd2ff8ea3f2aa9ff5f49e1ff99b6.jpg?imageMogr2/thumbnail/2500x2500%3E);
                filter: blur(60px);
                background-size: cover;
                background-repeat: no-repeat;
                opacity: .55;
            }
            .detail{
                display: flex;
                padding: 19px 30px 19px 15px;
                height: 150px;

                .poster{
                    width: 110px;
                    height: 150px;
                    background: url("../assets/images/bg.fbcd24ee.png");
                    background-size: 100% 100%;

                    .poster-img{
                        width: 110px;
                        height: 150px;
                    }
                }
                .content{
                    overflow-x: hidden;
                    margin-left: 12.5px;
                    line-height: 1;
                    color: #fff;

                    .title{
                        font-size: 20px;
                        margin-top: 2px;
                        font-weight: 700;
                        overflow: hidden;
                    }
                    .public {
                        margin-top: 10px;
                        opacity: .8;
                    }
                    .score{
                        margin-top: 11px;
                        font-size: 18px;
                        font-weight: 700;
                        color: #fc0;

                        .sum{
                            display: inline-block;
                            margin-left: 5px;
                            font-size: 12px;
                            color: #fff;
                            opacity: .8;
                        }
                    }
                    .type{
                        margin-top: 10px;
                        opacity: .8;

                        .type-img{
                            display: inline-block;
                            margin-left: 5px;
                            width: 42px;
                            height: 13px;
                            vertical-align: top;
                            opacity: .85;

                            .imax{
                                width: 26px;
                                background: url("../assets/images/IMAX.png");
                                background-size: 100% 100%;
                            }
                            .icon-bg{
                                display: block;
                                height: 100%;
                            }
                        }
                    }

                }
            }
            .movie-detail-arrow{
                position: absolute;
                width: 10px;
                height: 14.6px;
                right: 15px;
                top: 50%;
                transform: translateY(-50%);

                .arrow-bg{
                    display: block;
                    width: 100%;
                    height: 100%;
                    background: url("../assets/images/arrow-right2222.png");
                    background-size: cover;
                }
            }
        }
        .select-sticky{
            position: sticky;
            background-color: #fff;
            top: -1px;
            width: 100%;
            z-index: 2;

            .show-warp {
                height: 45px;

                .show-days{
                    position: relative;
                    display: flex;
                    width: 100%;
                    height: 45px;
                    background-color: #fff;
                    overflow-x: auto;
                    z-index: 11;

                    .day {
                        flex: none;
                        min-width: 115px;
                        line-height: 43px;
                        margin-left: 4.5px;
                        font-size: 14px;
                        text-align: center;
                        color: #666;
                    }
                    .chosen{
                        border-bottom: 2px solid #f03d37;
                        color: #f03d37;
                    }
                    &::-webkit-scrollbar {
                        display: none;
                    }
                }
            }
            .nav-wrap{

                .filter-nav{
                    position: relative;
                    width: 100%;
                    height: 40px;
                    background-color: #fff;
                    z-index: 11;

                    .tab{
                        display: flex;
                        height: 100%;

                        &::before{
                            content: " ";
                            display: block;
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 1px;
                            background-color: #e5e5e5;
                            transform: scaleY(.5);
                        }
                        &::after{
                            content: " ";
                            display: block;
                            position: absolute;
                            bottom: 0;
                            left: 0;
                            width: 100%;
                            height: 1px;
                            background-color: #e5e5e5;
                            transform: scaleY(.5);
                        }

                        .item{
                            flex: 1;
                            position: relative;
                            text-align: center;
                            font-size: 13px;
                            line-height: 40px;
                            color: #666;

                            .drop{
                                display: inline-block;
                                position: absolute;
                                top: 18px;
                                width: 0;
                                height: 0;
                                margin-left: 4px;
                                border: 4px solid transparent;
                                border-top-color: #b0ada8;
                            }
                        }
                        .chosen{
                            color: #dd403b;
                            .drop{
                            border-bottom-color: #dd403b;
                            border-top-color: transparent;
                            top: 14px;
                            }
                        }
                    }
                    .close-tab{
                            position: relative;
                            width: 100%;
                            background: #fff;
                            z-index: 100;
                            overflow: scroll;

                            .tab-content{

                                .page{
                                    background-color: #fff;
                                    overflow: auto;
                                    z-index: 999;

                                    .region-tab{
                                        height: 44px;

                                        .tablist{
                                            display: flex;
                                            width: 90%;

                                            .item{
                                                position: relative;
                                                display: inline-block;
                                                padding: 0 10px;
                                                width: 50%;
                                                height: 100%;
                                                line-height: 44px;
                                                text-align: center;
                                            }
                                            .chosen{
                                                color: #f03d37;

                                                &::after{
                                                    content: "";
                                                    position: absolute;
                                                    display: block;
                                                    bottom: 0;
                                                    left: 0;
                                                    width: 90%;
                                                    border-top: 2px solid #f03d37;
                                                }
                                            }
                                        }
                                    }
                                    .region-list{
                                        background: #f5f5f5;
                                        height: 400px;

                                        .region-sidenav{
                                            width: 35%;
                                            height: 100%;
                                            float: left;
                                            overflow: scroll;

                                            .subway,
                                            .district{
                                                min-height: 100%;
                                                background: #fff;

                                                .district-li{
                                                    height: 44px;
                                                    padding-left: 10px;
                                                    line-height: 44px;
                                                    font-size: 14px;
                                                    text-overflow: ellipsis;
                                                    white-space: nowrap;
                                                    overflow: hidden;
                                                }
                                                .chosen{
                                                    color: #f03d37;
                                                    background-color: #f5f5f5;
                                                }
                                            }
                                            &::-webkit-scrollbar {
                                                    display: none;
                                            }
                                        }
                                        .region-list-item{
                                            width: 65%;
                                            height: 100%;
                                            float: right;
                                            overflow: scroll;

                                            .filter-list{
                                                background-color: #f5f5f5;

                                                .item {
                                                    position: relative;
                                                    height: 45px;
                                                    line-height: 45px;
                                                    padding: 0 0 0 25px;

                                                    .item-name{
                                                        display: inline-block;
                                                        width: 80%;
                                                        font-size: 14px;
                                                        color: #333;
                                                        text-overflow: ellipsis;
                                                        white-space: nowrap;
                                                        overflow: hidden;
                                                    }
                                                    .item-count{
                                                        float: right;
                                                        width: 20px;
                                                        margin-right: 10px;
                                                        color: #8f9296;
                                                        font-size: 12px;
                                                        text-align: right;
                                                    }
                                                }
                                                .chosen{
                                                    color: #f03d37;

                                                    .item-name{
                                                        color: #f03d37;
                                                    }
                                                    .item-count{
                                                        color: #f03d37;
                                                    }
                                                    ::before{
                                                        content: '';
                                                        display: block;
                                                        position: absolute;
                                                        left: 8px;
                                                        top: 19px;
                                                        width: 11.5px;
                                                        height: 8px;
                                                        background-image: url("../assets/images/chosen.png");
                                                        background-repeat: no-repeat;
                                                        background-size: 100% 100%;
                                                    }
                                                }
                                            }
                                            &::-webkit-scrollbar {
                                                display: none;
                                            }
                                        }

                                    }
                                }
                            }
                    }
                }
            }
            .brand{
                        min-height: 150px;
                        max-height: 352px;

                        .brand-content{

                            .brand-list{
                                position: relative;
                                line-height: 44px;
                                height: 44px;
                                padding: 0 15px 0 26px;
                                border-bottom: 1px solid #e5e5e5;
                                color: #333;

                                .brand-name{
                                    display: inline-block;
                                    width: 49%;
                                }
                                .brand-count{
                                    display: inline-block;
                                    width: 49%;
                                    text-align: right;
                                    color: #8f9296;
                                    font-size: 12px;
                                }
                            }
                            .chosen{
                                color: #f03d37;
                                 .brand-name{
                                    color: #f03d37;
                                 }
                                 .brand-count{
                                    color: #f03d37;
                                 }
                                ::after{
                                    content: '';
                                    display: block;
                                    position: absolute;
                                    left: 8px;
                                    top: 19px;
                                    width: 11.5px;
                                    height: 8px;
                                    background-image: url("../assets/images/chosen.png");
                                    background-repeat: no-repeat;
                                    background-size: 100% 100%;

                                }
                            }
                        }
                        &::-webkit-scrollbar {
                            display: none;
                        }
            }
            .special{
                min-height: 208px;
                overflow: hidden;

                    #special-content{
                            min-height: 150px;
                            max-height: 270px;
                            overflow: scroll;

                            .item-title{
                                margin-left: 12px;
                                margin-top: 11px;
                                font-size: 15px;
                            }
                            .item-list{
                                margin: 0 12px 12px 12px;

                                .item{
                                    float: left;
                                    width: 21.3%;
                                    height: 30px;
                                    padding: 3px 0;
                                    margin-right: 3%;
                                    margin-top: 10px;
                                    line-height: 30px;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                    text-align: center;
                                    border: 1px solid #ccc;
                                    border-radius: 5px;
                                    font-size: 9.8px;
                                }
                                .chosen{
                                    background: #fcf0f0;
                                    color: #f03d37;
                                    border: 1px solid #f03d37;
                                }
                                &::after{
                                    display: block;
                                    clear: both;
                                    content: "";
                                }
                            }
                             &::-webkit-scrollbar {
                                display: none;
                            }
                    }
                    #special-btn{
                            height: 60px;
                            width: 100%;
                            border-top: 1px solid #e5e5e5;
                            margin-top: 10px;
                            background: #fafafa;
                            .btn{
                                display: inline-block;
                                height: 34px;
                                width: 21.3%;
                                margin: 13px 11px;
                                border: 1px solid #e5e5e5;
                                border-radius: 6px;
                                text-align: center;
                                line-height: 34px;
                                font-size: 14px;
                            }
                            #confirm-btn{
                                float: right;
                                background: #f03d37;
                                border: 1px solid #f03d37;
                                color: #fff;
                            }
                    }
            }
        }
        .cinema-wrap{
            margin-top: 0;
            background-color: #fff;
            
            .list-wrap{
                background-color: #fff;

                .item{
                    padding: 13px 15px 13px 0;
                    margin-left: 15px;
                    background-color: #fff;
                    position: relative;
                    overflow: hidden;

                    .title-wrap{
                        line-height: 1.5;
                        .title-block{
                            display: flex;
        
                                .title{
                                    -webkit-box-flex: 1;
                                    flex: 1;
                                    height: 23px;
                                    line-height: 23px;
                                    font-size: 16px;
                                    color: #000;
        
                                }
                                .price-block{   
                                        display: inline-block;
                                        padding-left: 3px;
                                        color: #f03d37;
        
                                        .price{
                                            font-size: 18px;
                                        }
                                        .q{
                                            padding-left: 3px;
                                            font-size: 11px;
                                        }
                                }
                           }
                        .location-block{
                            display: flex;
                             -webkit-box-pack: justify;
                             justify-content: space-between;
                             margin-top: 6px;
                             font-size: 13px;
                             color: #666;
        
                        }
                        .label-block{
                                    height: 17px;
                                    line-height: 17px;
                                    margin-top: 4px;
                                    margin-bottom: 4px;
                                    overflow: hidden;
                                    font-size: 0;
                                    flex-shrink: 0;
        
                                    &>div{
                                        position: relative;
                                        display: inline-block;
                                        padding: 0 3px;
                                        height: 15px;
                                        line-height: 15px;
                                        border-radius: 2px;
                                        font-size: 12px;
                                        margin: 0 3px;
                                        border: 1px solid #000;
                                    }
                                    &>div:first-child{
                                        margin-left: 0;
                                    }
                        }
                        .discount-block{
                             color: #999;
                             margin-bottom: 4px;
                              .discount{
                                  display: flex;
                                  align-items: center;

                                  .discount-label {
                                    width: 15px;
                                    height: 14px;
                                  }
                                  .cardPromotionTag{
                                    background: url("../assets/images/卡.png");
                                    background-size: 100% 100%;
                                  }
                                  
                              .discount-label-text{
                                  margin-left: 5px;
                                    font-size: 11px;
                              }
                              }
                         }
                    }
                    .recent{
                        padding: 0 15px 0 0;
                        margin-right: -15px;
                        line-height: 1.5;
                        font-size: 0;

                        .time-line{
                            display: inline-block;
                            position: relative;
                            vertical-align: middle;
                            font-size: 12px;
                            color: #999;
                        }
                        .after{
                            margin-left: 14px;
                            &::before{
                                content: "";
                                display: block;
                                position: absolute;
                                height: 15px;
                                width: 1px;
                                left: -7px;
                                background: #e1e1e1;
                                top: 50%;
                                transform: translateY(-50%);
                            }
                        }
                    }
                }
            }

                        
        }
    }
    &::-webkit-scrollbar {
             display: none;
    }
}
.nothing{
    width: 100%;
    height: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
    // position: relative;
    // z-index: 999;

    &>img{
        width: 150px;
        height: 150px;
    }

}
@keyframes animation1 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.lodaing {
  width: 100%;
  height: 88vh;
  position: fixed;
  bottom: 0px;
  left: 0;
  background-color: #fff;
  z-index: 99;

  .img {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    width: 45px;
    height: 45px;

    img {
      position: relative;
      width: 100%;
      height: 100%;
      z-index: 3;
    }

    .img2 {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      margin: auto;
      animation: animation1 1s linear 0s infinite;
    }
  }
}
.stop{
        overflow: hidden;
    }
    ::v-deep .van-loading{
        text-align: center;
        width: 100%;
        height: 40px;
        line-height: 40px;
        // padding-top: 10px;
        position: fixed;
        // top:137px;
        left: 0;
        right: 0;
        bottom: 0px;
        z-index: 10;
        background-color: #f4f4f4;
    }

</style>